<template>
    <el-container>
        <el-header class="duration-700 dark:bg-gray-700 dark:text-white" height="54px">
            <header>
                <div class="class">
                    <div class="left" :class="[all.coursesVue.topChoose?'left--1':'']">
                        <span :class="[all.coursesVue.topChoose?'':'top-choose']"
                              @click="all.setCoursesVue('topChoose',0)">
                            我教的课
                        </span>
                        <span :class="[all.coursesVue.topChoose?'top-choose':'']"
                              @click="all.setCoursesVue('topChoose',1)">
                                我听的课
                            </span>
                    </div>
                    <div class="right">
                                <span
                                        v-if="user.info.isTeacher"
                                        @click="dialogVisibleCourse=true"
                                >
                                    <el-icon size="14"><Plus/></el-icon>
                                    创建课程
                                </span>
                        <transition name="fade">
                            <NewCourse v-show="dialogVisibleCourse" :setDialogVisible="setDialogVisible"
                                       :getClass="getClass"/>
                        </transition>
                    </div>
                </div>
                <span @click="setDark">{{ dark.dark ? "日间" : "夜间" }}模式</span>
            </header>
        </el-header>
        <el-main class="duration-700 dark:bg-gray-700 dark:text-white">
            <!--我教的课-->
            <main v-show="!all.coursesVue.topChoose">
                <div class="search"></div>
                <div class="course-a" v-for="index in course">
                    <p>
                        <span>{{ index.name }}</span>
                        <span class="add-class-icon" @click="delCourse(index.name)"><el-icon size="18"><Delete/></el-icon></span>
                    </p>
                    <div @click="openCourse(index.name,index.id)">
                        <span>
                        {{ index.introduce }}
                        </span>
                    </div>
                </div>
            </main>
            <!--我听的课-->
            <main v-show="all.coursesVue.topChoose">
                <div class="search"></div>
                <div class="course-a" v-for="(index) in learnCourses">
                    <div @click="openCourse(index.name,index.id)">
                        <div>
                            <span>{{ index.name }}</span>
                        </div>
                        <div>
                            <span>{{ index['teacher'] }}</span>
                        </div>

                    </div>
                </div>
            </main>
        </el-main>
    </el-container>
</template>

<script setup>
import { onBeforeMount, ref } from "vue";
import NewCourse from "@/components/dialog/NewCourse.vue";
import workApi from "@/http/work/workApi";
import { useDarkStore } from "@/stores/darkMode/darkMode";
import { usePageStore } from "@/stores/page/page";
import { useAllStore } from "@/stores/all";
import { useUserStore } from "@/stores/user/user";
import router from "@/router";

const user = useUserStore()
const page = usePageStore()
const all = useAllStore()


// 切换暗黑模式
let dark = useDarkStore();

function setDark() {

    dark.setDark()
}

// 对话框显示
let dialogVisibleCourse = ref(false)        // 创建课程-----对话框
function setDialogVisible() {  // 关闭全部对话框
    dialogVisibleCourse.value = false
}


// 删除课程
const delCourse = (name) => {
    workApi.delete("teacher/delete_subject", {
        data: {
            subject_name: name
        }
    }).then(() => {
        getClass()
    })
}

// 真实获取课程
let course = ref([])

async function getClass() {
    console.log(111)
    if (user.info.isTeacher) {
        const res = await workApi.get("teacher/subject");
        if (res["msg"]) {
            course.value = res.data
        }
    }
}


onBeforeMount(() => {
    getClass()
    getLearnCourses()
})

// 切换到课程
function openCourse(courseName, courseId) {
    all.setCourseContainerInfo("name", courseName)
    all.setCourseContainerInfo("id", courseId)
    router.push({
        name: "CourseInfo",
        query: {
            "name": courseName,
            "id": courseId
        }
    })
}

const learnCourses = ref([])

function getLearnCourses() {
    if (!user.info.isTeacher) {
        workApi.get("student/subject").then((res) => {
            learnCourses.value = res.data
        });
    }
}

</script>

<style scoped lang="less">
header {
  display: flex;
  position: relative;
  width: 100%;
  padding-left: 20px;
  border-bottom: 1px solid rgb(#dddddd);
  color: #9ba8c5;

  span {
    display: inline-block;
    flex: 1;
    height: 53px;
    margin-right: 50px;
    font-size: 16px;
    font-weight: 400;
    line-height: 53px;

    &:hover {
      color: #4f95f5;
      cursor: pointer;
    }
  }

  .class {
    flex: 10;

    > div {
      display: inline-block;
    }

    .left {
      .top-choose {
        color: #4f95f5;
      }

      &::before {
        content: "";
        position: absolute;
        left: 35px;
        bottom: 0;
        width: 34px;
        height: 4px;
        background-color: #4f95f5;
        transition: all 0.2s;
      }
    }

    .left--1 {
      &::before {
        left: 150px;
      }
    }

    .right {
      height: 53px;
      float: right;

    }
  }
}

main {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  width: 100%;
  height: 100%;
  padding: 20px 0 0 20px;

  .course {
    margin-bottom: 30px;

    p {
      margin-bottom: 10px;
      font-size: 16px;
      font-weight: 900;

      .add-class-icon {
        margin: 0 0 0 20px;
        color: #9b9b9b;

        &:hover {
          color: #4f95f5;
        }
      }
    }

    .null-class {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 20%;
      min-width: 250px;
      height: 142px;
      color: #9b9b9b;
      margin: 0 50px 30px 0;
      padding: 20px;
      border: 1px solid #9b9b9b;
      font-size: 20px;
      border-radius: 8px;
      transition: 0.3s;

      &:hover {
        color: #4f95f5;
        border: 1px solid #4f95f5;
      }
    }
  }

  .course-a {
    width: 250px;
    height: 210px;
    margin-right: 50px;
    margin-bottom: 30px;

    p {
      margin-bottom: 10px;
      font-size: 16px;
      font-weight: 900;

      .add-class-icon {
        margin: 0 0 0 20px;
        color: #9b9b9b;

        &:hover {
          color: #4f95f5;
        }
      }
    }

    .null-class {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 20%;
      min-width: 250px;
      height: 142px;
      color: #9b9b9b;
      margin: 0 50px 30px 0;
      padding: 20px;
      border: 1px solid #9b9b9b;
      font-size: 20px;
      border-radius: 8px;
      transition: 0.3s;

      &:hover {
        color: #4f95f5;
        border: 1px solid #4f95f5;
      }
    }

    > div {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 142px;
      padding: 20px;
      border-radius: 8px;
      background-image: linear-gradient(to left top, #45e696, #39e09a, #2cdb9d, #1fd59f, #12cfa1, #0bcca2, #05caa2, #00c7a3, #00c7a3, #00c7a3, #00c7a3, #00c7a3);;
      cursor: pointer;
      color: white;
      transition: 0.2s;

      span {
        height: 98%;

        display: -webkit-box;

        -webkit-box-orient: vertical;

        -webkit-line-clamp: 4;

        overflow: hidden;
      }

      &:hover {
        transform: scale(1.01);
      }

      div:nth-child(1) {
        font-size: 20px;
        font-weight: 500;
      }

      div:nth-child(2) {
        font-size: 12px;
        font-weight: 400;
      }
    }
  }
}
</style>